<template>
    <div
        ref="widgetDom"
        data-name="widget-view-vessel"
        :data-id="widgetData.eles.id"
        class="widget-view-vessel"
        :class="[...customClass]"
        :style="customStyle"
    >
        <template v-if="preview">
            <template v-for="(item, index) in widgetList" :key="index">
                <widget-view
                    :element="item"
                    :preview="preview"
                />
            </template>
        </template>
        <template v-else>
            <draggable
                v-model="widgetList"
                v-bind="{
                    ...draggableConfig,
                    disabled: draggableDisabled || (!dragoverStatus && widgetList.length === 0)
                }"
                class="draggable-content"
                @change="onDragChange"
                @dragenter.navtive.stop="onDragenter"
                @dragleave.navtive.stop="onDragleave"
                @dragover.navtive.stop="onDragover"
                @drop.navtive.stop="onDrop"
            >
                <template #item="{ element, index }">
                    <div>
                        <widget-view :element="element" />
                    </div>
                </template>
            </draggable>

            <div v-if="widgetList.length === 0 && !draggableDisabled && !!placeholder" class="empty-placeholder">
                {{ placeholder }}
            </div>
            <div v-if="draggableDisabled && disabledPlaceholder" class="disable-placeholder">
                {{ disabledPlaceholder }}
            </div>
        </template>
        <slot></slot>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref, computed } from 'vue'
import useWidgetDraggable from '@/libs/edit/widgetDraggable'
import usePageHistory from '@/libs/edit/pageHistory'
export default defineComponent({
    name: 'WidgetViewVessel',
    props: {
        // 控件列表
        modelValue: {
            type: Array,
            default: () => ([])
        },
        // 容器控件数据
        widgetData: {
            type: Object,
            default: () => ({})
        },
        // 禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 自定义style
        customStyle: {
            type: Object,
            default: () => ({})
        },
        // 自定义class
        customClass: {
            type: Array,
            default: () => ([])
        },
        // 占位符
        placeholder: {
            type: String,
            default: '拖拽组件到面板'
        },
        // 禁用时的占位符
        disabledPlaceholder: {
            type: String,
            default: '不可放置'
        },
        // 预览模式
        preview: {
            type: Boolean,
            default: false
        }
    },
    emits: [
        'update:modelValue'
    ],
    setup(props, { emit }) {
        const {
            modelValue,
            // widgetData,
            disabled,
            customStyle,
            customClass,
            placeholder,
            disabledPlaceholder,
            preview
        } = toRefs(props)

        const {
            draggableConfig,
            draggableHandleName
        } = useWidgetDraggable()
        
        const {
            onAddPageHistory
        } = usePageHistory()

        const widgetDom = ref(null)

        const widgetList = computed({
            get: () => modelValue.value,
            set: val => emit('update:modelValue', val)
        })
        const draggableDisabled = computed(() => disabled.value)

        const onDragChange = e => {
            if (e.moved || e.added) {
                onAddPageHistory()
            }
        }

        const dragoverStatus = ref(false)
        // 当被鼠标拖动的对象进入其容器范围内时触发此事件
        const onDragenter = e => {
            dragoverStatus.value = true
        }
        // 当被鼠标拖动的对象离开其容器范围内时触发此事件
        const onDragleave = e => {
            dragoverStatus.value = false
        }
        // 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
        const onDragover = e => {
            dragoverStatus.value = true
        }
        // 在一个拖动过程中，释放鼠标键时触发此事件
        const onDrop = e => {
            dragoverStatus.value = false
        }

        return {
            preview,
            widgetDom,

            draggableConfig,
            draggableHandleName,

            placeholder,
            disabledPlaceholder,

            customStyle,
            customClass,

            widgetList,
            draggableDisabled,
            
            onDragChange,

            dragoverStatus,
            onDragenter,
            onDragleave,
            onDragover,
            onDrop
        }
    }
})
</script>

<style lang="less" scoped>
@import './widget-view-vessel.less';
</style>